<script setup>
import { ref, onMounted } from "vue";
import { queryLogPageApi } from "@/api/report";
import { ElMessage } from "element-plus";

const logList = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

const queryLogData = async () => {
  try {
    const res = await queryLogPageApi(page.value, pageSize.value);
    if (res.code === 200) {
      logList.value = res.data.rows; // 假设后端返回的数据在 res.data.rows 中
      total.value = res.data.total; // 假设后端返回的总条数在 res.data.total 中
      // console.log(logList.value);
    } else {
      ElMessage.error("获取日志信息统计数据失败：" + res.msg);
    }
  } catch (error) {
    ElMessage.error("获取日志信息统计数据时发生错误：" + error.message);
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  queryLogData();
};

const handleCurrentChange = (val) => {
  page.value = val;
  queryLogData();
};

onMounted(() => {
  queryLogData();
});
</script>
<template>
  <div class="log-statistics">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>日志信息统计</span>
      </div>
      <el-table :data="logList" style="width: 100%">
        <el-table-column
          prop="operateTime"
          label="操作时间"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="className"
          label="类名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="methodName"
          label="方法名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="methodParams"
          label="方法参数"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="returnValue"
          label="返回值"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="costTime"
          label="耗时"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="operateEmpName"
          label="操作人"
          width="180"
        ></el-table-column>
      </el-table>
    </el-card>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped>
.log-statistics {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
